<template>
  <div id="app">
    <div>
      <Hand
        class="Head"
        left="true"
        @back="router.back()"
        title="设置"
        :iconbool="false"
      ></Hand>
    </div>
    <div @click="SetHeadImg" class="HeadPortrait">
      <img src="../../img/论坛头像/pic_u8851-0.png" alt="" />
      <div>
        <span>{{ name }}</span> <br />
        <span>{{ number }}</span>
      </div>
      <van-icon name="arrow" />
    </div>
    <!-- 手机号 密码修改 -->
    <div class="Modify">
      <div @click="ChangePhone">
        <div>
          <van-icon class="ShouJi" name="records" />
          <span>手机号修改</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div @click="ChangePassword">
        <div>
          <van-icon class="ZhiFu" name="shield-o" />
          <span>支付密码修改</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 消息提示 邀请好友 -->
    <div class="News">
      <div @click="Message">
        <div>
          <van-icon class="ShouJi" name="guide-o" />
          <span>消息提示</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div>
        <div>
          <van-icon class="ZhiFu" name="friends-o" />
          <span>邀请好友</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 关于  责任声明 -->
    <div class="About">
      <div @click="AboutDuty">
        <div>
          <van-icon class="ShouJi" name="fail" />
          <span>关于</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div @click="AboutDuty1">
        <div>
          <van-icon class="ZhiFu" name="warning-o" />
          <span>责任声明</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 检查更新 -->
    <div class="ToUpdate">
      <div @click="show = true">
        <div>
          <van-icon class="ShouJi" name="replay" />
          <span>检查更新</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div @click="Opinion">
        <div>
          <van-icon class="ZhiFu" name="chat-o" />
          <span>意见反馈</span>
        </div>
        <van-icon name="arrow" />
      </div>
      <div>
        <div>
          <van-icon class="QingChu" name="wechat-moments" />
          <span>清除缓存</span>
        </div>
        <van-icon name="arrow" />
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <Update @IS="isShow"></Update>
        </div>
      </div>
    </van-overlay>
    <!-- 退出登录 -->
    <div class="Exit">
      <span @click="Exit">退出登录</span>
    </div>
  </div>
</template>

<script setup>
import Hand from "../../components/Hand.vue";
import { useRouter } from "vue-router";
import { ref } from "vue";
import { showConfirmDialog } from "vant";

// 引入 检查更新 组件
import Update from "../Set/Update.vue";

const name = ref("OMINI.BASS");
const number = ref("18801558965");
const router = useRouter();
const show = ref(false);
// 退出登录
const Exit = () => {
  showConfirmDialog({
    message: "你确定退出吗?",
  })
    .then(() => {
      window.localStorage.clear();
      router.push({
        path: "/login",
      });
    })
    .catch(() => {
      // console.log("点击了取消退出");
    });
};
// 点击关于 和 责任声明
const AboutDuty = () => {
  router.push({
    path: "/AboutDuty",
    query: {
      title: "关于",
    },
  });
};
const AboutDuty1 = () => {
  router.push({
    path: "/AboutDuty",
    query: {
      title: "责任声明",
    },
  });
};
// 点击支付密码 ChangePassword
const ChangePassword = () => {
  router.push({
    path: "/ChangePassword",
  });
};
// 点击手机号修改 ChangePhone
const ChangePhone = () => {
  router.push({
    path: "/ChangePhone",
  });
};
// 点击消息提示 Message
const Message = () => {
  router.push({
    path: "/Message",
  });
};
// 点击意见反馈
const Opinion = () => {
  router.push({
    path: "/Opinion",
  });
};
// 点击修改头像 SetHeadImg
const SetHeadImg = () => {
  router.push({
    path: "/SetHeadImg",
  });
};
// 点击关闭遮罩层
const isShow = () => {
  show.value = false;
};
</script>

<style lang="less" scoped>
#app {
  height: 100vh;
  width: 100%;
  background-color: rgba(236, 253, 250, 1);
  .Head {
    margin-bottom: 3.667vw;
  }
  .HeadPortrait {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: 85%;
    background-color: #ffff;
    padding: 4vw;
    border-radius: 2.333vw;
    div {
      position: absolute;
      left: 24vw;
      span:nth-of-type(1) {
        font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
        text-align: left;
      }
      span:nth-of-type(2) {
        font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
        font-weight: 700;
        font-style: normal;
        font-size: 12px;
        text-align: left;
      }
    }
  }
  .Modify {
    margin-top: 2.667vw;
    margin-left: auto;
    margin-right: auto;
    padding: 4vw;
    border-radius: 2.333vw;
    background-color: #ffff;
    width: 85%;
    span {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        span {
          margin-left: 1.833vw;
        }
      }
    }
    > div:nth-of-type(1) {
      border-bottom: 0.267vw solid rgba(125, 125, 125, 0.2);
      padding-bottom: 2.667vw;
      margin-bottom: 2.667vw;
    }
    .ShouJi {
      font-weight: 800;
      font-size: 4.667vw;
      color: red;
    }
    .ZhiFu {
      font-weight: 800;
      font-size: 4.667vw;
      color: orange;
    }
  }
  .News {
    margin-top: 2.667vw;
    margin-left: auto;
    margin-right: auto;
    padding: 4vw;
    border-radius: 2.333vw;
    background-color: #ffff;
    width: 85%;
    span {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        span {
          margin-left: 1.833vw;
        }
      }
    }
    > div:nth-of-type(1) {
      border-bottom: 0.267vw solid rgba(125, 125, 125, 0.2);
      padding-bottom: 2.667vw;
      margin-bottom: 2.667vw;
    }
    .ShouJi {
      font-weight: 800;
      font-size: 4.667vw;
      color: pink;
    }
    .ZhiFu {
      font-weight: 800;
      font-size: 4.667vw;
      color: blue;
    }
  }

  .About {
    margin-top: 2.667vw;
    margin-left: auto;
    margin-right: auto;
    padding: 4vw;
    border-radius: 2.333vw;
    background-color: #ffff;
    width: 85%;
    span {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        span {
          margin-left: 1.833vw;
        }
      }
    }
    > div:nth-of-type(1) {
      border-bottom: 0.267vw solid rgba(125, 125, 125, 0.2);
      padding-bottom: 2.667vw;
      margin-bottom: 2.667vw;
    }
    .ShouJi {
      font-weight: 800;
      font-size: 4.667vw;
      color: yellow;
    }
    .ZhiFu {
      font-weight: 800;
      font-size: 4.667vw;
      color: purple;
    }
  }
  .ToUpdate {
    margin-top: 2.667vw;
    margin-left: auto;
    margin-right: auto;
    padding: 4vw;
    border-radius: 2.333vw;
    background-color: #ffff;
    width: 85%;
    span {
      font-family: "微软雅黑";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      text-align: left;
    }
    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      div {
        span {
          margin-left: 1.833vw;
        }
      }
    }
    > div:nth-of-type(1) {
      border-bottom: 0.267vw solid rgba(125, 125, 125, 0.2);
      padding-bottom: 2.667vw;
      margin-bottom: 2.667vw;
    }
    > div:nth-of-type(2) {
      border-bottom: 0.267vw solid rgba(125, 125, 125, 0.2);
      padding-bottom: 2.667vw;
      margin-bottom: 2.667vw;
    }
    .ShouJi {
      font-weight: 800;
      font-size: 4.667vw;
      color: blue;
    }
    .ZhiFu {
      font-weight: 800;
      font-size: 4.667vw;
      color: red;
    }
    .QingChu {
      font-weight: 800;
      font-size: 4.667vw;
      color: pink;
    }
  }
  .Exit {
    width: 80%;
    padding: 3vw 0;
    background-color: rgba(255, 94, 129, 1);
    border-radius: 8vw;
    margin: 4vw auto;
    text-align: center;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 300px;
  height: 300px;
  background-color: #fff;
  border-radius: 15px;
}
</style>
